<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./css/inputnumber.css" />
  <link rel="stylesheet" href="./css/index.css" />
  <title>Document</title>
</head>

<body>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box"><img src="./img/fruit.jpg" alt="" /></div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>
    <!-- table -->
    <div class="main">
      <table>
        <!-- 头部 -->
        <thead>
          <tr>
            <th>名字</th>
            <th>图片</th>
            <th>单价</th>
            <th>个数</th>
            <th>总价</th>
            <th>操作</th>
          </tr>
        </thead>
        <!-- 身体 -->
        <tbody>
          <tr v-for="(item,index) in fruitList">
            <td>
              <input type="checkbox" v-model="item.isChecked" />
              {{item.name}}
            </td>
            <td>
              <img :src="`./img/${item.name}.png`" alt="" />
            </td>
            <td>{{item.price}}</td>
            <td>
              <div class="my-input-number">
                <!-- 递减 -->
                <span role="button" class="my-input-number__decrease" @click='reduce(index)'>
                  -
                </span>
                <!-- 累加 -->
                <span role="button" class="my-input-number__increase" @click='add(index)'>
                  +
                </span>
                <div class="my-input">
                  <!-- 数字显示区域 -->
                  <span class="my-input__inner">{{item.num}}</span>
                </div>
              </div>
            </td>
            <td>{{ item.num*item.price }}</td>
            <td>
              <button @click='remove(index)'>删除</button>
            </td>
          </tr>
        </tbody>
        <!-- 空车 -->
      </table>
      <div class="bottom">
        <!-- 全选 -->

        <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥<span class="price">{{totalPrice}}</span></span>
        <button class="pay">结算({{totalCount}})</button>
      </div>
    </div>
  </div>
</body>

</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      fruitList: [{
          name: '火龙果',
          isChecked: true,
          num: 2,
          price: 6,
        },
        {
          name: '荔枝',
          isChecked: false,
          num: 7,
          price: 20,
        },
        {
          name: '榴莲',
          isChecked: false,
          num: 3,
          price: 40,
        },
        {
          name: '鸭梨',
          isChecked: true,
          num: 10,
          price: 3,
        },
        {
          name: '樱桃',
          isChecked: false,
          num: 20,
          price: 34,
        },
      ]
    },
    methods: {
      add(index) {
        this.fruitList[index].num++;
      },
      reduce(index) {
        if (this.fruitList[index].num == 1) {
          if (confirm('确定要删除吗?')) {
            this.fruitList.splice(index, 1);
          } else {
            return;
          }
        }
        this.fruitList[index].num--;
      },
      remove(index) {
        if (confirm('确定要删除吗?')) {
          this.fruitList.splice(index, 1);
        }
      }
    },
    computed: {
      totalCount() {
        let _totalCount = 0;
        this.fruitList.filter((v) => {
            // 先筛选出选中元素
            return v.isChecked === true
          })
          .forEach((v) => {
            _totalCount += v.num
          })
        return _totalCount
      },
      totalPrice() {
        let _totalCount = 0;
        this.fruitList.filter((v) => {
            return v.isChecked === true
          })
          .forEach((v) => {
            _totalCount += v.num * v.price;
          })
        return _totalCount
      },
    }
  })
</script>